<!-- eslint-disable no-prototype-builtins -->
<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { Empty } from 'ant-design-vue';
import CommonSearch from '@/components/common/common-search.vue';
import AndroidImg from '@/assets/imgs/Android.png';
import { delApp, getAppList, uplaodApp } from '@/service/api/modules/manage/app-version-manage';
import Add from './modules/add.vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const commonSearchRef = ref(null);
const searchParams = ref({
  // appName: null,
  time: null
});

const searchFormList = [
  // {
  //   type: 'input',
  //   key: 'appName',
  //   label: '版本号',
  //   placeholder: '请输入版本号',
  //   span: 24,
  //   md: 12,
  //   lg: 8,
  //   xl: 8,
  //   xxl: 5
  // },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '时间',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

// 分页相关
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(20);
const pageSizeOptions = ref(['20', '50', '100']);
const listContentRef = ref(null);
const list = ref([]);
const loading = ref(false);

function onChange(page, pageSizes) {
  pageNum.value = page;
  pageSize.value = pageSizes;
  listContentRef.value.scrollTop = 0;
}

async function getList() {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
    // appName: searchParams.value.appName
  };
  if (searchParams.value?.time?.[0]) {
    params.beginTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  loading.value = true;
  try {
    const { data, error } = await getAppList(params);
    if (!error) {
      console.log(data);
      list.value = data.list;
      total.value = data.total;
    }
  } finally {
    loading.value = false;
  }
}

function search() {
  getList();
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      appName: null,
      time: null
    };
    search();
  });
}

const visible = ref(false);
const operateType = ref('add');
const addLoading = ref(false);
const currrentRow = ref(null);
const addRef = ref(null);

function handleAdd(type) {
  operateType.value = type;
  visible.value = true;
}

function handleClose() {
  visible.value = false;
}

async function handleOk() {
  const uploadData = {
    ...addRef.value
  };
  const params = {
    ...uploadData.model
  };
  console.log('uploadData:', uploadData);

  await uploadData.validateForm();
  addLoading.value = true;
  // try {
  //   const { error } = await uplaodApp(params, uploadData.fileList);
  //   if (!error) {
  //     window.$message.success('上传成功');
  //     reset();
  //     handleClose();
  //   }
  // } finally {
  //   addLoading.value = false;
  // }
  uplaodApp(params, uploadData.fileList)
    .then(({ error }) => {
      if (!error) {
        window.$message.success('上传成功');
        reset();
        handleClose();
      }
    })
    .finally(() => (addLoading.value = false));
}

getList();

function deleteApp(row) {
  window.$modal.confirm({
    title: `确定删除版本号为V${row.appVersion}的应用吗？`,
    onOk: async () => {
      const { error } = await delApp([row.appFileUuid]);
      if (!error) {
        window.$message.success('删除成功');
        reset();
      }
    },
    onCancel: () => {}
  });
}
</script>

<template>
  <div class="app-version h-full w-full">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    >
      <template #other>
        <AButton type="primary" ghost class="mini-btn mr-8px" @click="handleAdd('add')">
          <template #icon>
            <icon-ic-round-add class="align-sub text-icon" />
          </template>
          <span class="ml-3px">新增</span>
        </AButton>
      </template>
    </CommonSearch>
    <div ref="listContentRef" class="list-content w-full" :class="list.length ? '' : 'empty-list'">
      <ASpin tip="数据加载中..." :spinning="loading">
        <ARow v-if="list.length" :gutter="16">
          <ACol v-for="(item, index) in list" :key="index" :lg="12" :xl="8" :xxl="6">
            <div class="item">
              <div class="left">
                <div class="data">
                  <div class="label">版本号</div>
                  <div class="value">V{{ item.appVersion }}</div>
                </div>
                <div class="data">
                  <div class="label">上传时间</div>
                  <div class="value">{{ item.createTime }}</div>
                </div>
                <div class="data">
                  <div class="label">包体积</div>
                  <div class="value">{{ item.appSize }}</div>
                </div>

                <div class="data">
                  <div class="label">更新信息</div>
                  <div class="value" :title="item.appUpdateInfo">{{ item.appUpdateInfo }}</div>
                </div>
                <div class="data">
                  <div class="label">备注信息</div>
                  <div class="value">{{ item.appRemark }}</div>
                </div>
              </div>

              <div class="right">
                <img :src="AndroidImg" alt="" />
              </div>

              <div class="operation">
                <icon-ic-round-delete class="cursor-pointer align-sub text-icon color-red" @click="deleteApp(item)" />
              </div>
            </div>
          </ACol>
        </ARow>
        <template v-else>
          <AEmpty :image="simpleImage" />
        </template>
      </ASpin>
    </div>

    <div class="pagination">
      <APagination
        v-model:current="pageNum"
        v-model:page-size="pageSize"
        show-size-changer
        show-quick-jumper
        :total="total"
        :page-size-options="pageSizeOptions"
        @change="onChange"
      />
    </div>
    <Modal
      v-model:visible="visible"
      :title="`${operateType == 'add' ? '新增' : '修改'}版本信息`"
      height="650px"
      width="700px"
      :destroy-on-close="true"
      @close="handleClose"
    >
      <Add ref="addRef" :row-data="currrentRow"></Add>
      <template #footer>
        <div class="modal-footer">
          <AButton type="primary" :loading="addLoading" @click="handleOk">提 交</AButton>
          <AButton @click="handleClose">关 闭</AButton>
        </div>
      </template>
    </Modal>
  </div>
</template>

<style lang="scss" scoped>
.app-version {
  .list-content {
    height: calc(100% - 110px);
    overflow: auto;
    padding: 5px 15px;
    :deep(.ant-spin-nested-loading) {
      width: 100%;
      height: 100%;
    }
    &.empty-list {
      padding: 0;
      margin: 0 8px;
      margin-top: 5px;
      background-color: #fff;
      box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.03),
        0 1px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px 0 rgba(0, 0, 0, 0.02);
      :deep(.ant-spin-container) {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .item {
      position: relative;
      width: 100%;
      box-shadow: 0 0 10px 1px rgba(128, 128, 128, 0.2);
      border-radius: 10px;
      margin: 10px;
      background: #fff;
      display: flex;
      padding: 15px;
      .left {
        width: calc(100% - 120px);
        border-right: 1px solid #eee;
        padding-right: 8px;
        .data {
          display: flex;
          margin-bottom: 5px;
          .label {
            font-weight: bold;
            padding-right: 5px;
            width: 80px;
            &::after {
              content: ':';
            }
          }
          .value {
            color: #888;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
          }
        }
      }
      .right {
        width: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100px;
          user-select: none;
        }
      }

      .operation {
        position: absolute;
        right: 10px;
        top: 5px;
      }
    }
  }
  .pagination {
    background-color: #fff;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
    margin: 0 8px;
    margin-top: 8px;
    border-radius: 8px;
    padding: 10px 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
